<template>
	<view style="height: 100vh;">
		<newNavBar>
			<template v-slot:right>
				<view style="display: flex;flex-direction: row; height: 100%;">
					<view @click="saveCommData"
						style="padding-right: 4px;  height: 100%;display: flex; align-items: center;">
						<uni-icons customPrefix="iconfont" color="#fff" :size="22" type="layui-icon-ok"></uni-icons>
					</view>
					<view @click="filterOpen"
						style="padding-left: 10px;  height: 100%;display: flex; align-items: center;">
						<uni-icons customPrefix="my-iconfont" color="#fff" :size="22" type="icon-shaixuan"></uni-icons>
					</view>
				</view>
			</template>
		</newNavBar>


		<view style="padding: 15px;">
			<uni-forms-item>
				<!-- plain="true -->
				<button class="mini-btn" type="default" size="mini" plain="true"
				style="width: 100px;height: 35px;font-size: 15px;"
				@click="saveCommData()">确定</button>
			</uni-forms-item>
			<uTable id="uTable" ref="table" :isSingle="isSingle" :swiperHeight="(swiperHeight-30)" 
				@selection-change="selectionChange" :headData="headData" :bodyData="tableData">
			</uTable>
		</view>


		<!-- 右侧筛选框界面 -->
		<uni-drawer ref="showRight" mode="right" :width="windowWidth">
			<view class="close" :style="{ backgroundColor: '#fff',marginTop: StatusBar+'px'}">
				<!-- 销售出库参照发货单（销货单） -->
				<filterView v-if="isCommType('pos')" @clikeLeft="closeDrawer" @reset="reset" @query="query">
					<uni-forms ref="baseForm" :modelValue="baseFormData" class="content" label-position="top">
						<uni-forms-item label="销货单号" name="orderCode" :labelWidth="labelWidth" required>
							<uni-easyinput v-model="baseFormData.orderCode"></uni-easyinput>
						</uni-forms-item>
						<uni-forms-item label="客户名称" name="cuName" :labelWidth="labelWidth" required>
							<uni-easyinput v-model="baseFormData.cuName"></uni-easyinput>
						</uni-forms-item>
						<uni-forms-item label="创建日期" name="date" :labelWidth="labelWidth" required>
							<uni-datetime-picker type="date" :clear-icon="false" v-model="baseFormData.date" />
						</uni-forms-item>
					</uni-forms>
				</filterView>
			</view>
		</uni-drawer>
	</view>
</template>

<script>
	import uTable from '../unit/uTable.vue'
	import * as SystemJs from '../../common/system.js'
	import * as configJs from '../../common/config.js'
	export default {
		components: {
			uTable
		},
		data() {
			return {
				pageCode: '', //页面编码
				pageType: '', //页面类型
				isBlue: '', //单据类型
				dataType: '', //页面请求的数据类型
				isSingle: true, //选择类型是否是单选
				//滑动区域的高度(单位px)
				swiperHeight: 0,
				windowWidth: 0, //渲染出页面的高度
				screenHeight: 0, //屏幕的高度
				labelWidth: 80,
				commData: {},
				pages: '12',
				listSumHeight: 0,
				filterData: [],
				// setDateRange: [],
				rowKey: '',
				selectInfo: [],
				baseFormData: {
					orderCode: '',
					cuName: '',
					date: '',
					userCode: '',
					userName: '',
					groupCode: '',
					gxCode: '',
					proName: '',
					proCode: '',
					typeCode: ''
				},
				baseRangeInfo: {
					gxRange: [],
					groupRange: [],
					invClassRange: []
				},
				range: [{
						value: 0,
						text: "篮球"
					},
					{
						value: 1,
						text: "足球"
					},
					{
						value: 2,
						text: "游泳"
					},
				],
				headData: [],
				tableData: [],
				StatusBar: 0,
				transObj: {},
				userInfo: {}
			}
		},
		onLoad(res) {
			this.pageCode = res.pageCode; //父页面的页面编码
			this.pageType = res.pageType;
			this.dataType = res.dataType;
			if (res.isBlue) {
				this.isBlue = res.isBlue;
			}
			if (res.isSingle) {
				//将字符串转为boolean对象
				this.isSingle = JSON.parse(res.isSingle);
			}
			//获取传输的对象
			if (res.obj && !SystemJs.systemJs.IsEmpty(res.obj)) {
				this.transObj = JSON.parse(res.obj);
			}
			this.userInfo = configJs.getBaseInfo.getUserInfo();
			this.loadData();
			//获取屏幕高度
			uni.getSystemInfo({
				success: (res) => {
					this.y = res.windowHeight
					this.windowWidth = res.windowWidth;
					var statusBar = res.statusBarHeight //状态栏高度
					this.screenHeight = res.screenHeight;
					//屏幕高度-状态栏高度-自定义导航栏高度
					this.swiperHeight = res.screenHeight - statusBar - 45
					this.StatusBar = statusBar
					console.log('heightShow', this.swiperHeight)
				}
			})
			//动态设置swiper的高度
			this.$nextTick(() => {
				var height = 0;
				height = this.getByIdHeight("head");
				console.log('he', height)
				this.listSumHeight = height;
				//获取列表中汇总信息的高度
			});

			SystemJs.systemJs.showTitleBar(res.title, true)
			const eventChannel = this.getOpenerEventChannel();
			this.getCommRangeInfo();
		},
		mounted() {
			// var timeouts = setTimeout(() => {
			// 	this.$refs.table.autoScrollRow(2);
			// 	clearTimeout(timeouts)
			// }, 1500)
		},
		methods: {
			isCommType(code) {
				var flag = false;
				if (code == 'pos') {
					if (this.pageCode == 'pos') {
						return true;
					}
				} 
				return flag;
			},
			/**
			 * 加载初始数据
			 */
			loadData(type="") {
				this.clearListInfo();
				var url = "";
				var obj = {};
				var obj = SystemJs.systemJs.copyObject(this.baseFormData);
				obj.operateType = this.pageType;
				obj.baseCode = uni.getStorageSync('account');
				obj.inOutType = this.pageCode;
				obj.isBlue = this.isBlue;
				if (this.transObj.parentGx) {
					obj.parentGx = this.transObj.parentGx;
				}
				if (this.transObj.defalutUser) {
					obj.defalutUser = this.transObj.defalutUser;
				}
				if (this.transObj.plType) {
					obj.plType = this.transObj.plType;
				}
				obj.type=type;
				obj.mobType = "H5";
				obj.conditions = "";
				var userCode = '';
				if (this.userInfo.userCode) {
					userCode = this.userInfo.userCode;
				}
				obj.loginUserCode = userCode;
				if (this.pageCode == "pos") {
					url = "/App/GetSaleOrderList";
				}
				SystemJs.httpUnit.requestCryptoPost({
					url: url,
					data: obj
				}).then((res) => {
					if (res.Result) {
						var data = res.Data;
						// console.log(JSON.stringify(data))
						if (data != undefined) {
							this.headData = data.headData;
							//防止Dom未加载完全计算出错的情况
							var timeout = setTimeout(() => {
								if (data.list != undefined && data.list.length > 0) {
									this.tableData = data.list;
									// if (this.pageCode == "prbg" || this.pageCode == "machine_work_report") {
									// 	//人员信息
									// 	if (this.dataType == "user") {
									// 		//默认选中相应班组内成员
									// 		var tList = this.getUserGroupList(data.list, this.transObj
									// 			.groupCode);
									// 		this.defaultSelectRow(tList);
									// 	}
									// }
								}
								this.$nextTick(() => {
									// this.$refs.table.autoScrollRow(2);
								})
								clearTimeout(timeout)
							}, 1000)
						} else {
							this.clearListInfo();
						}
					} else {
						this.clearListInfo();
						SystemJs.httpUnit.uniToast(JSON.stringify(res.Message))
					}
				}).catch((err) => {
					SystemJs.httpUnit.uniToast(JSON.stringify(err))
				})
			},
			/**
			 * 清除列表数据
			 */
			clearListInfo() {
				this.headData = [];
				this.tableData = [];
			},
			//保存选择的信息
			saveCommData(e) {
				try{
					console.log('page', this.pages);
				var obj = {};
				// this.commData.code = '000012';
				obj.dataType = this.dataType;
				obj.value = this.selectInfo;
				console.log(this.selectInfo)
				uni.$emit('saveData', obj);
				let canNavBack = getCurrentPages()
				if (canNavBack && canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					//如果刷新页面当前页面的路由信息会丢失，所以只能通过原生js的方法退回上一页面
					history.back();
				}
				}catch(e){
					console.log(e)
				}
				
			},
			/**
			 * 获取班组内人员信息
			 * @param {Object} list
			 * @param {Object} groupCode
			 */
			getUserGroupList(list, groupCode) {

				var tempLsit = [];
				if (list != undefined && list.length > 0 && !SystemJs.systemJs.IsEmpty(groupCode)) {
					list.forEach((item, index) => {
						if (item.groupCode == groupCode) {
							tempLsit.push(item);
						}
					})
					return tempLsit;
				}
				return tempLsit;
			},
			/**
			 * 默认选中
			 */
			defaultSelectRow(list) {
				this.$nextTick(() => {
					//默认选择
					this.$refs.table.toggleRowSelection(list, true);
				})

			},
			change(e, type) {
				// console.log(type)
				if (type == "gx") {
					console.log(e)
					if (!SystemJs.systemJs.IsEmpty(e)) {
						var selectPGXCode = SystemJs.systemJs.selectRage(this.baseRangeInfo.gxRange, e)
						if (selectPGXCode) {
							this.getGroupInfo(selectPGXCode.pgxCode);
						}
					} else {
						this.getGroupInfo();
					}
				}
			},
			//单元格筛选事件
			filterChange(e) {
				console.log('fil', e);
			},
			sortChange(e) {
				console.log('sortChange', e);
			},
			selectionChange(e) {
				//获取不到selectInfo ，因为销货单列表没传id，勾选需要参照一个字段
				var obj = e.detail;
				this.selectInfo = obj.value
				console.log('selectionChange',this.selectInfo[0]);
			},
			closeDrawer() {
				this.closeRefs('showRight')
			},
			///状态栏右侧图标点击事件
			filterOpen() {
				// uni.showToast({
				// 	title: '测试',
				// })
				this.openRefs('showRight')
			},
			//打开控件窗体
			openRefs(e) {
				this.$nextTick(() => {
					this.$refs[e].open()
				})
			},
			//关闭控件窗体
			closeRefs(e) {
				this.$refs[e].close()
			},
			//选择日期确认事件
			confirm(e) {
				console.log(e);
				try {
					this.baseFormData.date = e.fulldate
				} catch (e) {
					console.log(e);
				}
			},
			//重置事件
			reset() {
				this.clearObject(this.baseFormData);
			},
			//查询事件
			query() {
				this.loadData("query");
				this.closeRefs('showRight')
			},
			//清空输入框数据
			clearObject(obj) {
				for (let key in obj) {
					obj[key] = ''
				}
			},
			//根据id获取布局的高度
			getByIdHeight(id) {
				let element = '#' + id;
				var nHeight = 0;
				const query = uni.createSelectorQuery().in(this);
				query.select(element).boundingClientRect();
				query.selectViewport().scrollOffset();
				query.exec((res) => {
					if (res && res[0]) {
						nHeight = res[0].height;
					}
				});
				return nHeight;
			}
		}
	}
</script>

<style scoped>
	.content {
		padding: 15px;
	}

	.uni-forms-item {
		margin-bottom: 0px;
	}

	.uni-container {
		width: 100%;
		height: 100%;
	}

	/* //表头固定样式 */
	.tableHead {
		font-weight: bold;
		color: #333333;
		background: #F4F6FF;
		z-index: 20;
		position: absolute;
		top: 0;
	}

	.tableBody {
		overflow: scroll;
		margin-top: 42px;
	}

	/* 修改form表单列样式 缩小间距*/
	.uni-forms-item {
		margin-bottom: 0px;
	}

	/* 我们需要在 style 标签上加 scoped，同时使用 deep 穿透  才能修改覆盖了子组件的样式，否则无法在父组件中修改子组件样式*/
	/deep/ .uni-forms-item.is-direction-top .uni-forms-item__label {
		padding: 0px;
	}
</style>
